<template>
  <view class="page-index">
    <view style="margin: 15rpx;">
      热门资讯
    </view>
    <view v-for="(item, index) in dynamics" :key="index"
          class="item-img-view"
          :style="'background-image: url('+item.cover+')'">
      <view class="item-title-view">
        {{ item.content }}
      </view>
    </view>
  </view>
</template>

<script>
import {fetchQuerydynamics} from '/src/api/index'

definePageConfig({
  navigationBarTitleText: '首页'
})

export default {
  data() {
    return {
      dynamics: [],
      time: ''
    }
  },
  methods: {
    getQuerydynamics() {
      this.dynamics = fetchQuerydynamics()
    },
  },
  onReady() {
    this.time = new Date().getTime();
  },
  onLoad(){
      setTimeout(() => {
          for(let i=0;i<40;i++){
            this.dynamics.push(...fetchQuerydynamics());
          }
      }, 1000);
  },
  onPullDownRefresh(){
      this.dynamics.length=0;
      this.dynamics.push(...fetchQuerydynamics());
      setTimeout(() => {
          uni.showToast({
              title: "刷新成功"
          })
          uni.stopPullDownRefresh();
      }, 1000);
  },
  onReachBottom(){
        this.dynamics.push(...fetchQuerydynamics());
  },
  onShow() {
  },
  onHide() {
  }
}
</script>

<style lang="scss">
.page-index{
  .item-img-view {
    position: relative;
    padding-bottom: 45%; /* padding百分比相对父元素宽度计算 */
    height: 0; //避免被内容撑开多余的高度
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    margin: 10px 15px;
  }

  .item-title-view {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background-color: rgba(128, 128, 128, 0.72);
    border-radius: 0 0 15px 15px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
